<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">
        <span class="fl">我的报销单</span>
        <div class="fr">
          <el-button type="primary" size="small" @click="dialogAdd=true">新增报销单</el-button>
        </div>
      </h2>
    </div>
    <!-- 内容区 -->
    <div class="box-bd p30">
      <!-- 筛选条件 -->
      <div class="search-box">
        <el-button icon="el-icon-search" size="small">筛选</el-button>
      </div>
      <!-- 列表数据 -->
      <div class="list-box">
        <el-table
          :data="tableData"
          max-height="500px"
          stripe
          class="table-list"
          v-loading="loading"
          @row-click="toDetail"
        >
          <el-table-column prop="date" label="报销日期"></el-table-column>
          <el-table-column prop="user.userName" label="报销人"></el-table-column>
          <el-table-column prop="projects.projectName" label="所属项目"></el-table-column>
          <el-table-column prop="money" label="应报销金额"></el-table-column>
          <el-table-column prop="alreadyMoney" label="已报销金额"></el-table-column>
          <el-table-column prop="surplusMoney" label="待报销金额"></el-table-column>
          <el-table-column prop="remark" label="详情"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">{{ taskOptions[scope.row.state].title }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click.stop="edit(scope.row.id)">编辑</el-button>
              <el-button type="text" @click.stop="pay(scope.row)">付款</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchData.currentPage"
          :page-sizes="[15, 25, 30, 50]"
          :page-size="searchData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.size"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog
      title="新增报销单"
      :visible.sync="dialogAdd"
      :fullscreen="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <dispatch-add @changeState="dialogAdd=$event" @reload="initTableData"></dispatch-add>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑报销单"
      :visible.sync="dialogEdit"
      :fullscreen="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <dispatch-edit ref="editDialog" @changeState="dialogEdit=$event" @reload="initTableData"></dispatch-edit>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog
      title="报销单详情"
      :visible.sync="dialogDetail"
      :fullscreen="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <dispatch-detail ref="detailDialog" @changeState="dialogDetail=$event"></dispatch-detail>
    </el-dialog>
    <!-- 支出 -->
    <el-dialog
      title="支出"
      :visible.sync="dialogReceive"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <money-receive
        ref="receiveDialog"
        @changeState="dialogReceive=$event"
        @reload="initTableData"
      ></money-receive>
    </el-dialog>
  </div>
</template>
<script>
import { findList } from '@/api/dispatch'
import DispatchAdd from './dispatch-add.vue'
import DispatchEdit from './dispatch-edit.vue'
import DispatchDetail from './dispatch-detail.vue'
import MoneyReceive from './money-receive.vue'
export default {
  components: {
    DispatchAdd,
    DispatchEdit,
    DispatchDetail,
    MoneyReceive
  },
  data() {
    return {
      activeIndex: 0,
      companyId: this.$store.state.user.companyId,
      dialogEdit: false,
      dialogDetail: false,
      dialogAdd: false,
      dialogReceive: false,
      tableData: [],
      contractTypes: ['全部', '待审批', '进行中', '已完成'],
      taskOptions: [
        {
          val: 0,
          title: '未报销'
        },
        {
          val: 1,
          title: '已报销'
        }
      ],
      loading: false,
      searchData: {
        contractType: '',
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    changeState(index) {
      this.activeIndex = index
      this.searchData.contractType =
        this.activeIndex === 0 ? '' : this.activeIndex - 1
      this.searchData.currentPage = 1
      this.initTableData()
    },
    initTableData() {
      this.loading = true
      findList(this.companyId).then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    toDetail(row) {
      this.dialogDetail = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.detailDialog.initDialogData(row.id)
      })
    },
    edit(id) {
      this.dialogEdit = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.editDialog.initDialogData(id)
      })
    },
    pay(row) {
      this.dialogReceive = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.receiveDialog.initDialogData(row)
      })
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.searchData.currentPage = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.box-bd {
  .side-bar {
    padding: 25px;
  }
  .table-list {
    margin-bottom: 15px;
  }
  .list-box {
    li {
      height: 30px;
      line-height: 30px;
    }
  }
}
.tab-nav {
  margin-bottom: 15px;
  margin-left: 100px;
  li {
    float: left;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    margin: 0 25px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.active {
      border-bottom-color: #1989fa;
      color: #1989fa;
    }
  }
}
</style>
